<template>
	<view class="content">
		<view class="hz">
			<view class="left">
				<view class="info1">
					<text class="text1">{{currentCar.name}}</text>
					<picker :range="list" range-key="name" @change="carChange">
            <view class="gh">
              <text>更换</text>
              <image src="/static/order/xjt.png" mode="widthFix"></image>
            </view>
          </picker>
				</view>
				<view class="info2">
					<view class="flag"></view>
					<view class="addr">
						<text>{{deliverGoods.startaddr+deliverGoods.houseNo1}}</text>
					</view>
					<view class="yjt">
<!--						<text>></text>-->
					</view>
				</view>
				<view class="info2">
					<view class="flag flag2"></view>
					<view class="addr">
						<text>{{deliverGoods.endaddr+deliverGoods.houseNo2}}</text>
					</view>
					<view class="yjt">
<!--						<text>></text>-->
					</view>
				</view>
			</view>
			<view class="right">
				<image :src="baseUrl()+currentCar.zsimage" mode="widthFix"></image>
				<view class="cx">
					<text>车型：{{currentCar.name}}</text>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="hz2">
				<view @click="typeIndex= 0" class="item">
					<view class="title">
						<text>全程搬</text>
					</view>
					<view class="xz">
						<view class="left">
							<text>辉鲨货滴搬家</text>
						</view>
						<view class="right">
							<text class="text1">预估</text>
							<text class="text2">{{price}}元</text>
							<image v-if="typeIndex===0" src="/static/order/xz2.png" mode="widthFix"></image>
							<image v-else src="/static/order/wxz.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view @click="typeIndex= 1" class="item">
					<view class="title">
						<text>协助搬</text>
					</view>
					<view class="xz">
						<view class="left">
							<text>辉鲨货滴搬家</text>
						</view>
						<view class="right">
							<text class="text1">预估</text>
							<text class="text2">{{price}}元</text>
              <image v-if="typeIndex===1" src="/static/order/xz2.png" mode="widthFix"></image>
              <image v-else src="/static/order/wxz.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view @click="typeIndex= 2" class="item">
					<view class="title">
						<text>仅用车</text>
					</view>
					<view class="xz">
						<view class="left">
							<text>辉鲨货滴搬家</text>
						</view>
						<view class="right">
							<text class="text1">预估</text>
							<text class="text2">{{price}}元</text>
              <image v-if="typeIndex===2" src="/static/order/xz2.png" mode="widthFix"></image>
              <image v-else src="/static/order/wxz.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="cz">
					<view class="left">
						<image src="/static/sh/yy2.png" mode="heightFix"></image>
						<text class="text1">{{formatDate(deliverGoods.yytime)}}</text>
					</view>
					<view class="right">
						<image src="/static/sh/mobile.png" mode="heightFix"></image>
						<text class="text1">{{deliverGoods.mobile2}}</text>
					</view>
				</view>
			</view>
			<view class="more">
				<view class="item">
					<view class="left">
						<text>支付方式</text>
					</view>
					<view class="right">
						<text class="text1">线上支付</text>
						<text class="text2">></text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>跟车选择</text>
					</view>
					<view class="right">
						<text class="text1">需与司机协商</text>
						<text class="text2">></text>
					</view>
				</view>
				<view class="item last-item">
					<view class="left">
						<text>备注与服务</text>
					</view>
					<view class="right">
            <input type="text" v-model="deliverGoods.remark" placeholder="请输入备注">
						<text class="text2">></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="left">
				<text class="text1">预估</text>
				<text class="text2">{{price}}</text>
				<text class="text3">元</text>
			</view>
			<view class="right">
<!--				<view class="btn">下单并付定金20.00</view>-->
				<view @click="submit" class="btn">下单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "../../common/request";
  import {baseUrl, domain} from "../../common/api";
  import {formatDate} from "../../utils";

  export default {
		data() {
			return {
        list:[],//车型
        currentCar:{},
        typeIndex:0,
        price:0,
				gdList: [
					{},{},{}
				],
			}
		},
    onLoad() {
      this.getCar();
      this.getPrice();
    },
    computed:{
      deliverGoods(){
        return this.$store.state.deliverGoods;
      }
    },
		methods: {
      async submit() {
        this.deliverGoods.type = 2;
        let data = await this.$request({
          url: '/d/order/add',
          method: 'POST',
          data: this.deliverGoods
        });
        //提示
        uni.showToast({
          icon: "success",
          title: "呼叫成功"
        })
        setTimeout(() => {
          uni.navigateBack();
        }, 1000)
      },
      formatDate,
      getPrice(){
        request({
          url:'/d/car/getPrice',
          data:{
            distance:this.deliverGoods.distance
          },
          method:'post'
        }).then(res=>{
          this.price = res.data.price;
        })
      },
      baseUrl() {
        return domain
      },
      carChange({detail:{value}}){
        let item = this.list[value];
        this.deliverGoods.type_id = item.id;
        this.currentCar = item;
      },
      async getCar(){
        let data = await request({
          url: '/d/car/typeList',
          isAuth: false,
        });
        this.list = data.data
       this.currentCar =  this.list.filter(item=>item.id===this.deliverGoods.type_id)[0];
      },
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 200rpx;
		.hz{
			padding: 50rpx 30rpx 40rpx;
			background-color: #6A46D2;
			border-radius: 0 0 30rpx 30rpx;
			color: #fff;
			display: flex;
			.left{
				.info1{
					display: flex;
					.text1{
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
					.gh{
						margin-left: 15rpx;
						width: 100rpx;
						height: 30rpx;
						line-height: 30rpx;
						padding: 5rpx 0;
						border-radius: 20rpx;
						display: flex;
						justify-content: center;
						font-size: $uni-font-size-sm;
						border: 2rpx solid #fff;
						image{
							margin-top: 8rpx;
							margin-left: 5rpx;
							width: 20rpx;
						}
					}
				}
				.info2{
					margin-top: 30rpx;
					line-height: 40rpx;
					font-weight: bold;
					display: flex;
					.flag{
						margin-top: 12rpx;
						width: 15rpx;
						height: 15rpx;
						border-radius: 50%;
						background-color: #03A965;
					}
					.flag2{
						background-color: #FF4648;
					}
					.addr{
						margin-left: 20rpx;
						width: 350rpx;
					}
					.yjt{
						margin-left: 5rpx;
					}
				}
			}
			.right{
				margin-left: auto;

				image{
					width: 200rpx;
				}
				.cx{
					margin-top: 20rpx;
					line-height: 40rpx;
					text-align: center;
				}
			}
		}
		.main{
			margin: 20rpx;
			.hz2{
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx 20rpx 0;
				.item{
					line-height: 50rpx;
					margin-bottom: 40rpx;
					.title{
						color: #757575;
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
					.xz{
						margin-top: 30rpx;
						padding-left: 30rpx;
						display: flex;
						.left{
							font-size: $uni-font-size-lg;
							font-weight: bold;
						}
						.right{
							margin-left: auto;
							display: flex;

							.text1{}
							.text2{
								margin-left: 10rpx;
								font-size: $uni-font-size-lg;
								font-weight: bold;
							}
							image{
								margin-left: 20rpx;
								width: 40rpx;
							}
						}
					}
				}
				.cz{
					display: flex;
					line-height: 40rpx;
					padding: 50rpx 0 30rpx;
					font-weight: 600;
					.left{
						width: 60%;
						border-right: 1rpx solid #B7B7B7;
						display: flex;
						image{
							margin-top: 5rpx;
							height: 30rpx;
						}
						.text1{
							margin-left: 10rpx;
						}
					}
					.right{
						margin-left: auto;
						display: flex;

						image{
							margin-top: 5rpx;
							height: 30rpx;
						}
						.text1{
							margin-left: 10rpx;
						}
					}
				}
			}
			.more{
				margin-top: 20rpx;
				padding: 0 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				.item{
					padding: 40rpx 30rpx;
					border-bottom: 1rpx solid #F6F6F6;
					display: flex;
					.left{
						font-weight: bold;
					}
					.right{
						margin-left: auto;
						color: #929292;
            display: flex;
            align-items: center;
						.text1{}
						.text2{
							margin-left: 15rpx;
						}
					}
				}
				.last-item{
					border-bottom: none;
				}
			}
		}
		//底部
		.bottom{
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 3;
			display: flex;
			padding: 20rpx 10rpx 60rpx;
			width: 730rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			.left{
				.text1{}
				.text2{
					margin-left: 10rpx;
					font-size: 20px;
					font-weight: bold;
					color: #FF4648;
				}
				.text3{}
			}
			.right{
				margin-left: auto;
				.btn{
					width: 380rpx;
					height: 100rpx;
					text-align: center;
					font-size: $uni-font-size-lg;
					font-weight: bold;
					color: #fff;
					background-color: #895FFF;
					border-radius: 20rpx;
					letter-spacing: 1rpx;
				}
			}
		}
	}
</style>
<style>
	page{
		background-color: #F6F6F6;
	}
</style>
